<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  	<!-- Tell the browser to be responsive to screen width -->
  	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>股票数据分析</title>
    <link rel="shortcut icon" href="https://fund.oppsis.com/favicon.ico">
    <link rel="bookmark" href="https://fund.oppsis.com/favicon.ico">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdn.staticfile.org/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/highcharts/6.2.0/css/themes/sand-signika.css">
    <style type="text/css">
        main {
            padding-top: 76px;
            padding-left: 20px;
            padding-right: 20px;
        }

        .oi {
            cursor: pointer;
        }

        .left-col {
            border-right: 1px solid #efefef;
        }

        .left-col, .right-col {
            transition: all .3s;
        }

        .data-group button.close {
            width: 20px;
            position: absolute;
            right: 5px;
        }

        .chart {
            width:100%;
            height:200px;
            margin-bottom: 10px;
            position: relative
        }

        .chart button.close {
            position: absolute;
            top: 0px;
            right: 10px;
            z-index: 999999;
        }

        .data-groups .card {
            width: 100%;
        }

        .input-group-append .custom-select {
            border-radius: 0;
            border-right: 0;
        }

        .input-group-append span {
            cursor: pointer;
        }

        .charts:not(:fullscreen),
        .charts:not(:-webkit-full-screen),
        .charts:not(:-moz-full-screen) {
            margin-top: 40px;
            padding: 0;
        }

        :not(:root):-webkit-full-screen {
            padding: 20px;
        }

        :not(:root):-webkit-full-screen::backdrop {
            background-color: white;
        }
    </style>
  </head>
  <body>

    <header>
      <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" href="#">数据分析</a>
      </nav>
    </header>

    <main role="main">
        <div class="container-fluid">
            <div class="row">
                <div class="col left-col">
                    <div class="clearfix">
                        <button type="button" class="btn btn-link" data-action="addDataGroup">+添加数据组</button>
                        <button type="button" class="btn btn-link" data-action="exportDataGroup">导出数据CSV</button>
                        <!-- <span class="oi oi-collapse-left float-right"></span> -->
                    </div>
                    <div class="data-groups"></div>
                </div>
                <div class="col right-col">
                    <!-- <div>
                        <span class="oi oi-collapse-right float-left"></span> 
                    </div> -->
                     <div id="charts" class="charts" ondblclick="full_screen();"></div>
                </div>
            </div>
        </div>
        <div class="card shadow-sm mb-4 rounded data-group template" style="display: none">
            <button type="button" class="close" aria-label="Close" data-action="delDataGroup">
                <span aria-hidden="true">&times;</span>
            </button>
            <div class="card-body clearfix">
                <form>
                    <div class="form-group">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">横轴</span>
                            </div>
                            <input type="text" class="form-control xaxis" name="xAxis">
                        </div>
                    </div>
                </form>
                <a href="#" class="card-link float-left" data-action="addDataItem" title="输入数据格式示例" data-toggle="popover" data-content="净利润,33232.45,5323.56,43323.23<br/>或者：<br/>所有者权益,332.45,53.56,433.23<br/>或者：<br/>ROE,F:a/b<br/>" data-trigger="hover" data-container="body" data-placement="bottom" data-html="true">添加数据</a>
                <a href="#" class="card-link float-right" data-action="createChart">创建图表</a>
            </div>
        </div>
        <div class="form-group data-item template" style="display: none">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text"></span>
                </div>
                <input type="text" class="form-control" name="dateItem" title="双击进入编辑模式">
                <div class="input-group-append">
                    <select class="custom-select" name="chartType">
                        <option value="line" selected>折线</option>
                        <option value="column">柱状</option>
                        <!-- <option value="pie">饼状</option> -->
                    </select>
                    <select class="custom-select" name="axisType">
                        <option value="0" selected>左轴</option>
                        <option value="1">右轴</option>
                    </select>
                    <span class="input-group-text" data-action="compareDataItem">环比</span>
                    <span class="input-group-text" data-action='delDataItem'>&times;</span>
                </div>
            </div>
        </div>
        <div style="display:none;" class="chart template">
            <button type="button" class="close" aria-label="Close" data-action="delChart">
                <span aria-hidden="true">&times;</span>
            </button>
            <div style="width: 100%;height: 100%"></div>
        </div>
    </main>

    <div class="modal" id="dateItemDlg" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <textarea class="form-control" rows="3"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-action="saveDateItem">保存修改</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.staticfile.org/highcharts/6.2.0/highcharts.src.js" type="text/javascript"></script>
    <script src="index.js"></script>
    <script type="text/javascript">
        function full_screen() {
            if("fullscreenEnabled" in document || "webkitFullscreenEnabled" in document || "mozFullScreenEnabled" in document || "msFullscreenEnabled" in document) {
                if(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) {
                    console.log("User allows fullscreen");
                
                    var element = document.getElementById("charts");
                    //requestFullscreen is used to display an element in full screen mode.
                    if("requestFullscreen" in element) {
                        element.requestFullscreen();
                    } else if ("webkitRequestFullscreen" in element) {
                        element.webkitRequestFullscreen();
                    } else if ("mozRequestFullScreen" in element) {
                        element.mozRequestFullScreen();
                    } else if ("msRequestFullscreen" in element) {
                        element.msRequestFullscreen();
                    }

                }
            }
            else {
                console.log("User doesn't allow full screen");
            }
        }

        function screen_change() {
            //fullscreenElement is assigned to html element if any element is in full screen mode.
            if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
                console.log("Current full screen element is : " + (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement))
            }
            else {
                // exitFullscreen us used to exit full screen manually
                if ("exitFullscreen" in document) {
                    document.exitFullscreen();
                } else if ("webkitExitFullscreen" in document) {
                    document.webkitExitFullscreen();
                } else if ("mozCancelFullScreen" in document) {
                    document.mozCancelFullScreen();
                } else if ("msExitFullscreen" in document) {
                    document.msExitFullscreen();
                }
            }
        }

        document.addEventListener("fullscreenchange", screen_change);
        document.addEventListener("webkitfullscreenchange", screen_change);
        document.addEventListener("mozfullscreenchange", screen_change);
        document.addEventListener("MSFullscreenChange", screen_change);

        //called when requestFullscreen(); fails. it may fail if iframe don't have allowfullscreen attribute enabled or for something else. 
        document.addEventListener("fullscreenerror", function(){console.log("Full screen failed");});
        document.addEventListener("webkitfullscreenerror", function(){console.log("Full screen failed");});
        document.addEventListener("mozfullscreenerror", function(){console.log("Full screen failed");});
        document.addEventListener("MSFullscreenError", function(){console.log("Full screen failed");});
    </script>
  </body>
</html>
